{% extends "base.html" %} {% block html_title %} 下注排行榜 {% endblock html_title %}
{% block page_title %} 下注排行榜 {% endblock page_title %} {% block content %}
<div id="content">
    <el-row>
        <input type="text" placeholder='输入玩家昵称' @keyup.enter='queryByNickname' v-model="qs" style='padding:7px;border-radius: 5px;border:none'> {#
        <input type="text" placeholder='输入玩家昵称' v-model="qs" @input="queryByNickname" style='padding:7px;border-radius: 5px;border:none'>#}
        <button type='submit' @click="queryByNickname" style='padding:7px 20px;outline:none;border:none;margin-left:10px;border-radius:5px;background:#3c8dbc;color:white'>搜索</button>
        {% if current_user.is_admin %}
        <button @click='clearWagerDataFormVisible = true' style='float:right;font-size:15px;background:#fe5656;color:white;border-radius:5px;padding:7px;border:none;outline:none'>清除下注数据</button>
        {% endif %}
    </el-row>
    <el-row>
        <el-table :data="players" @row-click="onTableRowClick">
            <el-table-column prop="nickname" label="玩家昵称">
            </el-table-column>
            <el-table-column prop="wxid" label="微信id">
            </el-table-column>
{#            <el-table-column prop="wagerCount" label="下注次数" width="120px">#}
{#            </el-table-column>#}
            <el-table-column prop="wagerAmount" label="下注积分" width="120px">
            </el-table-column>
            <el-table-column prop="agent.nickname" label="上线" width="300px">
                <template slot-scope="scope">
                    {% if current_user.is_admin %}
                    <el-button type="primary" icon="el-icon-edit" size="mini"
                               @click="onChangeAgentButtonClicked($event, scope.row)"></el-button>
                    {% endif %}
                    {{scope.row.agent.nickname}}
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-row>
        <el-pagination background layout="prev, pager, next" :total="playerCount" page-size=30 :current-page.sync="currentPage" @current-change="onCurrentPageChanged">
        </el-pagination>
    </el-row>

    {% if current_user.is_admin %}
    <el-dialog :visible.sync="clearWagerDataFormVisible" title="清除下注数据">
        <el-row>
            <ul>
                <li>此操作会删除<b>所有</b>玩家<b>下注数据</b></li>
            </ul>
        </el-row>
        <el-form v-loading="clearWagerDataFormBlocking" element-loading-text="清除 &hellip;" element-loading-spinner="el-icon-loading">
            <el-form-item>
                <el-button type="danger" @click="clearWagerData">清除</el-button>
                <el-button @click="clearWagerDataFormVisible = false" class='el-dialog__close'>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog :visible.sync="agentSelectFormVisible" title="修改代理">
        <el-row>
            <el-table :data="agents" style="height: 400px; overflow-y: auto;">
                <el-table-column prop="nickname" label="代理昵称">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small"
                                   @click="onAgentChanged(scope.row)">
                            选择
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </el-dialog>
    {% endif %}

</div>
{% endblock content %}
{% block js %}
<script>
var container = new Vue({
    el: "#content",
    data: function() {
        return {
            currentPage: 1,
            qs: '',
            playerCount: 0,
            players: [],
            clearWagerDataFormVisible: false,
            clearWagerDataFormBlocking: false,
            currentTargetPlayerWxid: '',
            agentSelectFormVisible: false,
            agentCount: 0,
            agents: []
        }
    },
    methods: {
        onTableRowClick: function(row, event, column) {
            console.log(row);
            location.href = "/player/" + row.wxid;
        },
        onCurrentPageChanged: function(currentPage) {
            this.refreshPlayerList();
        },
        onChangeAgentButtonClicked: function(e, row) {
            e.cancelBubble = true;
            this.refreshAgentList();
            this.currentTargetPlayerWxid = row.wxid;
            this.agentSelectFormVisible = true;
        },
        onAgentChanged: function(row) {
            console.log(row);
            if (! this.currentTargetPlayerWxid) {
                return;
            }
            this.$http.put(
                '/api/agent_player/' + this.currentTargetPlayerWxid,
                {agentWxid: row.wxid}
            ).then((res) => {
                this.agentSelectFormVisible = false;
                this.refreshPlayerList();
                this.$notify({
                    title: "成功",
                    message: "修改代理成功",
                    type: "success"
                });
            }).catch((err) => {
                this.$notify.error({
                    title: "修改代理失败",
                    message: err.response.data.message
                });
            });
        },
        refreshPlayerList: function() {
            var params = {};
            params.sortOrder = 'descending';
            params.sortTarget = 'wagerAmount';
            params.page = this.currentPage - 1;
            if (this.qs !== '') {
                params.qs = this.qs;
            }
            this.$http.get('/api/player/', {
                params: params
            }).then((res) => {
                this.players = res.data.players;
                this.playerCount = res.data.count;
            });
        },
        refreshAgentList: function() {
            this.$http.get('/api/agent/').then((res) => {
                this.agents = res.data.agents;
                this.agentCount = res.data.count;
            });
        },
        queryByNickname: function(v) {
            console.log('keyup enter')
            this.refreshPlayerList();
        },
        clearWagerData:function(){
            this.clearWagerDataFormBlocking = true;
            this.$http.post('/api/clear_wager').then((res) => {
                this.$notify({
                    title: "清除下注数据成功",
                    message: "清除下注数据成功",
                    type: "success"
                });
                setTimeout(() => location.reload(), 500);
            }).catch((err) => {
                this.$notify.error({
                    title: "清除下注数据失败",
                    message: err.response.data.error
                });
                this.clearWagerDataFormBlocking = false;
                this.clearWagerDataFormVisible = false;
            });
        }
    },
    created: function() {
        this.refreshPlayerList();
    }
});
</script>
{% endblock js %}